<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar></view>

		<view class="detail-info" v-show="motionInfo.id">
			<view class="info-title">
				<view class="title-top">{{ motionInfo.title }}</view>
				<view class="title-btm">
					<text class="btm-name">{{ leaderInfo.userName }}</text>
					<text class="btm-name">{{ motionInfo.typeName }}</text>
					<text class="btm-time">{{ motionInfo.createTime | parseTime('{y}-{m}-{d}') }}</text>
				</view>
			</view>
		</view>

		<view class="uploader-add" @click="onTts">
			<image v-if="!play" src="/static/img/icon_76.png" mode="widthFix"></image>
			<image src="/static/img/icon_77.gif" v-else mode="widthFix"></image>
		</view>

		<u-tabs
			class="type-tabs"
			:list="tabsList"
			:fontSize="30"
			:activeColor="'#fff'"
			:barWidth="0"
			:backgroundColor="'#D0021B'"
			:gutter="20"
			:current="tabsCurrent"
			:is-scroll="false"
			@change="tabsChange"
		></u-tabs>

		<view class="type-boxs" v-show="tabsCurrent == 0">
			<view class="form-box form-box-show">
				<u-form ref="uForm">
					<u-form-item class="form-item" label="届次" labelAlign="left" label-width="190">{{ motionInfo.jieName + motionInfo.ciName }}</u-form-item>
					<u-form-item class="form-item" label="建议编号" labelAlign="left" label-width="190">{{ motionInfo.no ? motionInfo.no : '' }}</u-form-item>
					<u-form-item class="form-item" label="建议分类" labelAlign="left" label-width="190">{{ motionInfo.typeName }}</u-form-item>
					<u-form-item class="form-item" label="建议类型" labelAlign="left" label-width="190">{{ kindList[motionInfo.kind] }}</u-form-item>
					<u-form-item class="form-item" label="建议人" labelAlign="left" label-width="190" v-if="motionInfo.kind != 2">{{ leaderInfo.userName }}</u-form-item>
					<u-form-item class="form-item" label="建议人" labelAlign="left" label-width="190" v-else>{{ motionInfo.collectiveOrganName }}</u-form-item>
					<u-form-item class="form-item" label="联系电话" labelAlign="left" label-width="190">{{ motionInfo.leaderPhone }}</u-form-item>
					<u-form-item class="form-item" label="联名人" labelAlign="left" label-width="190" v-if="motionInfo.kind == 3">{{ jointlerListName }}</u-form-item>
				</u-form>
				<u-form ref="uForm">
					<u-form-item class="form-item" label="办理情况" labelAlign="left" label-width="190">{{ nodeStatusMap[motionInfo.nodeStatus] }}</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="type-boxs" v-show="tabsCurrent == 1">
			<view class="detail-info">
				<view class="info-detail">
					<view class="overflow"><uni-parse :content="motionInfo.background"></uni-parse></view>
				</view>
			</view>

			<view class="file-list" v-if="fileList.length > 0">
				<view class="file-item" v-for="(item, index) in fileList" :key="index" @click="$showLine(item)">
					<view class="file-type"><image :src="imgpath(item.path)" mode="widthFix"></image></view>
					<view class="file-name clamp">
						{{ item.name }}
						<text class="file-time">{{ item.createTime }}</text>
					</view>
					<view class="right-type">预览</view>
				</view>
			</view>
		</view>
		<view class="type-boxs" v-show="tabsCurrent == 2">
			<view class="form-box form-box-show">
				<u-form ref="uForm">
					<u-form-item class="form-item" label="是否立案" labelAlign="left" label-width="190">{{ checkMap[motionInfo.checkIdea] }}</u-form-item>
					<u-form-item class="form-item" label="是否公开" labelAlign="left" label-width="190">{{ motionInfo.isOpen == '3' ? '公开' : '不公开' }}</u-form-item>
					<u-form-item class="form-item" label="是否优秀" labelAlign="left" label-width="190" v-show="motionInfo.isGood == '1'">{{ goodMap[motionInfo.isGood] }}</u-form-item>
					<u-form-item class="form-item" label="是否重点" labelAlign="left" label-width="190" v-show="motionInfo.isKey == '1'">{{ keyMap[motionInfo.isKey] }}</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="type-boxs" v-show="tabsCurrent == 3">
			<view class="unit-list" v-if="handlerList.length > 0">
				<view class="unit-item" v-for="(item, index) in handlerList" :key="item.id">
					<view class="unit-name clamp" @click="$showLine(item)">
						{{ item.deptName }}
						<text class="unit-time">提交时间：{{ item.createTime | parseTime('{y}-{m}-{d}') }}</text>
						<text class="unit-time">是否评议：{{ item.appraiseStatusName }}</text>
					</view>
					<view class="right-type" :style="'color: ' + colorMap[item.nodeStatus]">{{ item.nodeStatusName }}</view>
				</view>
			</view>
		</view>

		<view class="fiexd-btm" v-if="signFlag == 0">
			<text>此建议选择您为联名人</text>
			<view class="flex-box">
				<u-button class="form-btn" type="error" @click="jointlyersSign(1)">同意</u-button>
				<u-button @click="jointlyersSign(3)">拒绝</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import uniParse from '@/components/uni-parse/parse.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniParse
	},
	data() {
		return {
			tabsCurrent: 0,
			tabsList: [
				{
					name: '基本信息',
					value: 0
				},
				{
					name: '建议内容',
					value: 1
				},
				{
					name: '审查情况',
					value: 2
				},
				{
					name: '办理情况',
					value: 3
				}
			],
			nodeStatusMap: {
				'0': '草稿',
				'1': '待审查',
				'4': '交办中',
				'5': '办理中',
				'6': '已答复(待满意度测评)',
				'8': '办结',
				'21': '转来信',
				'22': '转民情直通',
				'23': '撤案',
				'24': '并案',
				'25': '不立案',
				'101': '初审(可行性建议)',
				'102': '初审(委编办)',
				'103': '初审(委办、政府办)',
				'104': '初审反馈',
				'105': '复审交办',
				'106': '复审反馈',
				'107': '终审交办',
				'108': '终审复核',
				'109': '终审确认'
			},
			checkMap: {
				'0': '立案',
				'1': '转来信',
				'4': '并案',
				'5': '不立案'
			},
			goodMap: {
				'1': '优秀',
				'2': '良好',
				'3': '较差'
			},
			keyMap: {
				'0': '非重点',
				'1': '重点'
			},
			colorMap: {
				0: '#f29100',
				1: '#18b566',
				2: '#dd6161',
				3: '#0099ff'
			},
			kindList: {
				'1': '个人建议',
				'2': '集体建议',
				'3': '联名建议'
			},
			handlerList: '',
			id: '',
			detailInfo: '',
			motionInfo: {
				id: '',
				title: '',
				userName: '',
				typeName: '',
				createTime: '',
				background: '',
				jieName: '',
				ciName: '',
				no: '',
				kind: '',
				collectiveOrganName: '',
				leaderPhone: '',
				nodeStatus: '',
				checkIdea: '',
				isOpen: '',
				isGood: '',
				isKey: ''
			},
			jointlerListName: '',
			leaderInfo: {
				id: '',
				userName: ''
			},
			signFlag: '',
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.signFlag = option.signFlag;
		this.loadData();
	},
	onHide() {
		this.$ttsOff();
	},
	onUnload() {
		this.$ttsOff();
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.currentUserId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		loadDict(type, list) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then(res => {
				if (!res.data) {
					return false;
				}
				res.data.forEach(item => {
					this[list][item.dictValue] = item.dictName;
				});
			});
		},
		loadData() {
			this.$request('/motion/query', {
				id: this.id,
				currentUserId: this.currentUserId
			}).then(res => {
				this.$store.commit('filePush', res.data.fileList);
				this.handlerList = res.data.handlerList;
				// this.motionInfo = res.data.motion;
				Object.keys(this.motionInfo).forEach(key => (this.motionInfo[key] = res.data.motion[key]));
				// this.leaderInfo = res.data.leaderInfo;
				Object.keys(this.leaderInfo).forEach(key => (this.leaderInfo[key] = res.data.leaderInfo[key]));
				let jointlerList = res.data.jointlerList;
				if (jointlerList && jointlerList.length > 0) {
					res.data.jointlerList.forEach((item, index) => {
						this.jointlerListName += item.userName + (index == jointlerList.length - 1 ? '' : ', ');
					});
				}
			});
		},
		jointlyersSign(state) {
			this.$request('/motion/jointlyers/sign', {
				clientCode: this.clientCode,
				currentUserId: this.currentUserId,
				motionId: this.id,
				signFlag: state
			}).then(res => {
				this.$msg('操作成功');
				this.signFlag = state;
				let pre = this.$prePage();
				if (pre && pre.loadData) {
					pre.loadData('refresh');
				}
			});
		},
		tabsChange(index) {
			this.tabsCurrent = index;
		},
		imgpath(path) {
			let typeA = path.split('.');
			let type = typeA[typeA.length - 1] || 'png';
			return `${this.$staticUrl}/static/img/icon_${type}.png`;
		},
		checkTo() {
			uni.navigateTo({
				url: '/pagesB/proposal/check_cp?id=' + this.id
			});
		},
		onTts() {
			let text = this.motionInfo.title;
			text += ',' + this.leaderInfo.userName;
			text += ',' + this.motionInfo.typeName;
			text += ',' + this.$parseTime(this.motionInfo.createTime, '{y}-{m}-{d}');
			text += ',' + this.$htmlRegx(this.motionInfo.background);
			this.$tts(text, this, 500);
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.detail-info {
	padding-bottom: 0;

	.info-title {
		margin-bottom: 0;
	}
}

.type-tabs {
	// margin-top: -40rpx;
}

.type-boxs {
	.container {
		padding: 20rpx 30rpx;
	}
}

.unit-list {
	padding: 30rpx;
	font-size: 17px;
	color: #333;
	line-height: 48rpx;

	.unit-item {
		margin-top: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0px 1rpx 14rpx 0px rgba(201, 201, 201, 0.5);
		border-radius: 12rpx;
		background: #fff;

		&:first-child {
			margin-top: 0;
		}

		.unit-name {
			width: 85%;
			color: #333;
			// text-decoration: underline;
		}

		.unit-time {
			margin-top: 4rpx;
			display: block;
			font-size: 14px;
			color: #666;
			line-height: 40rpx;
		}
	}

	.right-type {
		padding: 15rpx 20rpx;
		border: 0;
		font-size: 15px;
		color: #3396fb;
		word-break: keep-all;
		text-decoration: none;
	}
}

.form-box {
	.form-item {
		display: block;
		padding: 0 30rpx;
	}
}

.fiexd-btm {
	position: static;
	border-top: 10rpx solid #f5f7fa;
	padding: 30rpx;
}
</style>
